<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<link rel="stylesheet" type="text/css" href="css/normalize.css"/>
		<link rel="stylesheet" type="text/css" href="css/public.css"/>
		<link href="css/bootstrap.min.css">

		<!--<script src="js/detail.js"></script>-->

	</head>
	<body>
		<!--头部开始-->
		<div id="header">
			<div class="wrap clear">

				<a href="#" class="left">蘑菇街首页</a>

				<ul class="right">
					<li class="li1 "><a href="javascript:;" class="login">登录</a></li>
					<li class="li1"><a href="javascript:;" class="text">我的订单</a></li>
					<li class="li1"><a href="javascript:;" class="cart-info-wrap"><span class="cart-info">购物车</span></a><i class=""></i>
						<div id="box_cars">购物车里没有商品！</div>
					</li>

					<li class="li1"><a href="javascript:;" class="client">客户服务</a><i></i>
						<div class="sub_nav">
							<p><a href="#" class="clear_left">消费者服务</a></p>
							<p><a href="#" class="clear_left">商家服务</a></p>
							<p><a href="#" class="clear_left">规则中心</a></p>
						</div>
					</li>
					<li class="li1"><a href="javascript:;" class="xiaodian">我的小店</a><i></i>
						<ol class="sub_nav">
							<li><a href="#">管理后台</a></li>
							<li><a href="#">商家社区</a></li>
							<li><a href="#">商家培训</a></li>
							<li><a href="#">市场入驻</a></li>
						</ol>
					</li>
				</ul>
			</div>

		</div>
		<div class="mid_container clear" id="cars_seach">
				<div class="wrap clear cars_wrap" id="cars_wrap">
					<div class="mid_left">

							<!--<img src="http://s15.mogucdn.com/b7/pic/160727/13nyer_ifqtcyrzge4tmmjqmezdambqgyyde_320x320.jpg_100x100.jpg" alt="" />-->


					</div>



				</div>
			</div>
		<!--头部结束-->

		<!--中间-->
		<div class="cars clear" id="vuebox">
			 <div class="car-wrap clear">
		    	<h2>收货地址</h2>
				<ul class="address_info" v-for="address in addressList">
					<li class="address" v-if="address.status==1">
						<p class="user_address">{{address.realname}}</p>
						<p class="add-info">{{address.address+address.phone}}</p>
					</li>
				</ul>
				 <div class="cart-thead">
                    <div class="cart-col t-goods">商品</div>
                    <div class="cart-col t-props"></div>
                    <div class="cart-col t-prices">单价(元)</div>
                    <div class="cart-col t-quantity">数量</div>
                    <div class="cart-col t-sum">小计(元)</div>
                    <div class="cart-col t-action">操作</div>
                </div>
				 <div style="float: left"  class="cart-tbody" id="shoppingCarBody">

				 </div>
                <div class="goods-item goods-item-sele" style="">
                    <div class="goods-info">
                        <div class="cell b-checkbox">
                            <div class="cart-checkbox sele">
                                <input type="checkbox" checked=""  name="" id="" value="" />
                                <span class="line-circle"></span>
                            </div>
                        </div>
                        <div class="cell b-goods">
                            <div class="goods-name">
                                <div class="goods-pic">
                                    <a href=""><img src="" alt="" /></a>
                                </div>
                                <div class="goods-msg">
                                    <div class="goods-d-info">
                                        <a href=""></a>
                                    </div>
                                    <div class="goods-ex">
                                        <span class="promise"></span>
                                        <span class="promise">
												<i></i>
											</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
               <!--总计-->
               	<div class="total">
               		<div class="total_left">
               			<input type="checkbox" id="summaryBox"/>全选
               			<a href="javascript:;">删除</a>
               			<a href="javascript:;">清空失效商品</a>
               			<a href="javascript:;">移入收藏夹</a>
               		</div>
               		<div class="total_right">
               			<div class="shuliang">共有<span id="count" class="sl-info"></span>件商品</div>
               			<div class="total-moneny">总计：<span id="money" class="moneny"></span></div>
						<button id="pay">立即支付</button>
					</div>
               	</div>
		    </div>

		</div>


		<!--尾部-->
		<footer id="cars_footer">
			<div class="wrap clear">
				<div class="footer_one">
					<div class="help_four">
						<h4>- 新手帮助 -</h4>
						<ul class="footer_leter">
							<li><a href="">常见问题</a></li>
							<li><a href="">自助服务</a></li>
							<li><a href="">联系客服</a></li>
							<li><a href="">意见反馈</a></li>
						</ul>
					</div>
					<div class="help_four">
						<h4>- 权益保障 -</h4>
						<ul class="footer_leter">
							<li><a href="">全国包邮</a></li>
							<li><a href="">7天无理由退货</a></li>
							<li><a href="">退货运费补贴</a></li>
							<li><a href="">限时发货</a></li>
						</ul>
					</div>
					<div class="help_four">
						<h4>- 支付方式 -</h4>
						<ul class="footer_leter">
							<li><a href="">微信支付</a></li>
							<li><a href="">支付宝</a></li>
							<li><a href="">白富美支付</a></li>
						</ul>
					</div>
					<div class="help_four">
						<h4>- 移动客户端下载 -</h4>
						<ul class="footer_leter">
							<li><a href="">蘑菇街</a></li>
							<li><a href="">美丽说</a></li>
							<li><a href="">uni引力</a></li>
						</ul>
					</div>
				</div>
				<div class="footer_two">
					<p>
						<a href="">美丽说</a><b>|</b>
						<a href="">蘑菇街游戏</a><b>|</b>
						<a href="">淘粉吧</a><b>|</b>
						<a href="">穿衣搭配</a><b>|</b>
						<a href="">秋季女装新款</a><b>|</b>
						<a href="">秋季连衣裙长袖</a><b>|</b>
						<a href="">秋季孕妇装</a><b>|</b>
						<a href="">QQ钱包</a><b>|</b>
						<a href="">时尚品牌网</a><b>|</b>
						<a href="">装修</a><b>|</b>
						<a href="">背带裤搭配</a><b>|</b>
						<a href="">衣联网</a><b>|</b>
						<a href="">播视网视频</a><b>|</b>
						<a href="">慧聪网</a><b>|</b>
						<a href="">衬衫搭配</a><b>|</b>
						<a href="">牛仔外套搭配图片</a><b>|</b>
						<a href="">冬装时尚搭配</a><b>|</b>
						<a href="">针织衫搭配</a><b>|</b>
						<a href="">牛仔衣搭配</a><b>|</b>
						<a href="">风衣搭配</a><b>|</b>
						<a href="">补水面膜排行榜</a><b>|</b>
						<a href="">爱蘑菇街</a><b>|</b>


					</p>
				</div>
				<div class="footer_three">
					<ul class="ours">
						<li><a href="">关于我们</a></li>
						<li><a href="">招聘信息</a></li>
						<li><a href="">联系我们</a></li>
						<li><a href="">商家入驻</a></li>
						<li><a href="">商家后台</a></li>
						<li><a href="">蘑菇商学院</a></li>
						<li><a href="">商家社区</a></li>
						<li><a href="">规则中心</a></li>
						<li><a href="">有害信息举报</a></li>
					</ul>
					<p>©2017 Mogujie.com 杭州卷瓜网络有限公司</p>
				</div>
				<div class="footer_four">
					<p>
						<a href="">营业执照：913301065526808764</a>
						<b>|</b>
						<a href="">网络文化经营许可证：浙网文（2016）0349-219号</a>
						<b>|</b>
						<a href="">增值电信业务经营许可证：浙B2-20110349</a>
						<b>|</b>
						<a href="">安全责任书</a>
						<b>|</b>
						<a href="">浙公网安备 33010602002329号</a>
						<b>|</b>
					</p>
				</div>
			</div>
		</footer>
		<script type="text/javascript" src="/webjars/vue/2.6.10/dist/vue.js"></script>
		<script type="text/javascript" src="/webjars/jquery/3.4.1/jquery.min.js"></script>
		<script type="text/javascript" src="/webjars/axios/0.19.0/dist/axios.js"></script>
		<script src="js/mycookie.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/cars.js"></script>
		<script>
			var vm = new Vue({
				el:"#vuebox",
				data : {
					addressList:"",
					uidaddress:0
				},
				methods : {
					selectAddressListByView:function() {
						axios.get("/address/manager/query/address/view/list/by/uid",{params:{"uidaddress":this.uidaddress}}).then(res=>{
							this.addressList = res.data
							console.log(this.addressList)
						})
					}
				},
				mounted(){
					this.selectAddressListByView();
				}
			});

		</script>


		<script type="text/javascript">
			$(document).ready(function(){
				$(function () {
					//显示数据
					showPage();
				});

				function showPage() {
				    var result=JSON.parse(sessionStorage.getItem("shoppingCarList"));
				    console.log(result)
                    if(result!=null){
                        //解析数据
                        $("#shoppingCarBody").empty();
                        // 获取数据集合
                        var list = result;
                        // 判断list是否有效
                        if(list == null || list.length == 0) {
                            $("#shoppingCarBody")
                                .append("<div class='cart-col'>没有查询到数据</div>");

                            return ;
                        }
                        for(var i = 0; i < list.length; i++) {
                            var shoppingCar = list[i];

                            //数据
                            var checkBox = "<div class='cart-col t-checkbox'><input name='chk' class='itemBox' shoppingCarid='"+shoppingCar.id+"' type='checkbox'></div>";
                            var shoppingCarColor = "<div class='cart-col t-goods'>"+shoppingCar.commname+"</div>";
                            var shoppingCarPrice = "<div class='cart-col t-prices'>"+shoppingCar.price+"</div>";
                            var shoppingCarCount = "<div class='cart-col t-quantity'>"+shoppingCar.count+"</div>";
                            var shoppingCarSize = "<div class='cart-col t-sum'>"+shoppingCar.size+"</div>";

                            //按钮
                            var removeBtn = "<div class='cart-col t-action' style='padding-left: 30px'><button shoppingCarId='"+shoppingCar.id+"'class='removeBtn' type='button'><a href='#'>删除</a></button></div>";

                            var ul = "<div style='float: left' >"+checkBox+shoppingCarColor+shoppingCarPrice+shoppingCarCount+shoppingCarSize+removeBtn+"</div>";

                            // 将前面拼好的HTML代码追加到#shoppingCarBody中
                            $("#shoppingCarBody").append(ul);
                        }
                    }
				}


				// 全选/全不选功能
				$("#summaryBox").click(function(){
					// 1.获取当前checkbox的选中状态
					var currentStatus = this.checked;
					// 2.设置itemBox的选中状态
					$(".itemBox").prop("checked",currentStatus);

				});

				$("#batchRemoveBtn").click(function () {
					// 获取被选中的itemBox数组长度
					var length = $(".itemBox:checked").length;

					// 如果长度为0，说明没有选择itemBox
					if(length == 0) {
						alert("请至少选择一条！");
						return ;
					}

					// 在全局作用域内创建shoppingCarIdArray
					window.shoppingCarIdArray = new Array();

					// 遍历$(".itemBox:checked")
					$(".itemBox:checked").each(function(){

						// 通过checkbox的shoppingCarid属性获取shoppingCarId值
						var shoppingCarId = $(this).attr("shoppingCarid");

						// 存入数组
						window.shoppingCarIdArray.push(shoppingCarId);

						var requestBody = JSON.stringify(window.shoppingCarIdArray);
						$.ajax({
							url:"/shoppingcar/manager/batch/remove",
							type:"post",
							data:requestBody,
							contentType:"application/json;charset=UTF-8",
							dataType:"json",
							success:function(response){
								var result = response;
								if(result ==1) {
									alert("操作成功！");
									// 如果删除成功，则重新调用分页方法
									showPage();
								}
							}
						});

					});
				});

				$("#pay").click(function(){
					// 获取被选中的itemBox数组长度
					var length = $(".itemBox:checked").length;

					// 如果长度为0，说明没有选择itemBox
					if(length == 0) {
						alert("请至少选择一条！");
						return ;
					}

					var orderCode='';
					for (var i = 0; i < 6; i++) //6位随机数，用以加在时间戳后面。
					{
						orderCode += Math.floor(Math.random() * 10);
					}
					orderCode = new Date().getTime() + orderCode;  //时间戳，用来生成订单号。
					window.location.href='/pay?WIDout_trade_no='+orderCode+'&WIDtotal_amount='+sessionStorage.getItem("money")+'&WIDsubject='+sessionStorage.getItem("cid")+'&WIDbody='+'商品'

				});
				//单条删除
				$('#shoppingCarBody').on("click",".removeBtn",function () {
					// 获取当前记录的shoppingCarId
					var shoppingCarId = $(this).attr("shoppingCarId");
					// 存入全局变量数组
					window.shoppingCarIdArray = new Array();
					window.shoppingCarIdArray.push(shoppingCarId);

					var requestBody = JSON.stringify(window.shoppingCarIdArray);
					$.ajax({
						url:"/shoppingcar/manager/batch/remove",
						type:"post",
						data:requestBody,
						contentType:"application/json;charset=UTF-8",
						dataType:"json",
						success:function(response){
							var result = response;
							if(result ==1) {
								alert("操作成功！");
								// 如果删除成功，则重新调用分页方法
								showPage();
							}
						}
					});
				});
			})

		</script>
		<script>
			$(function () {
				$("body").on("click",".itemBox,#summaryBox",function(){
					// 在全局作用域内创建shoppingCarIdArray
					window.shoppingCarIdArray = new Array();
					if ($(".itemBox").prop("checked")){
						// 遍历$(".itemBox:checked")
						$(".itemBox:checked").each(function(){

							// 通过checkbox的shoppingCarid属性获取shoppingCarId值
							var shoppingCarId = $(this).attr("shoppingCarid");

							// 存入数组
							window.shoppingCarIdArray.push(shoppingCarId);

							var requestBody = JSON.stringify(window.shoppingCarIdArray);
							$.ajax({
								url:"/shoppingcar/manager/query/shoppingcar/list/by/id/list",
								type:"post",
								data:requestBody,
								contentType:"application/json;charset=UTF-8",
								dataType:"json",
								success:function(response){
									var money=null;
									var count=null;
									for(var i = 0; i < response.length; i++) {
										var shoppingCar = response[i];
										money+=shoppingCar.price;
										count+=shoppingCar.count;
									}
									sessionStorage.setItem("money",money);
									sessionStorage.setItem("shoppingCarList",response);
									$("#money").text(money)
									$("#count").text(count)
								}
							});

						});
					}else {
						sessionStorage.clear();
						$("#money").text('0')
						$("#count").text('0')
					}
				});
			})
		</script>
	</body>

</html>
